import Vue from 'vue'

Vue.directive('jujiao', {
  inserted (el) {
    /*
      1. 如果jujiao指令用在了原生标签上，el就是原生DOM对象
      2. 如果jujiao指令用在了上组件上（自定义标签），el就是当前组件的 根元素（root element）
    */
    // 1. el就是input或文本域 - 通过标签名判断
    if (['INPUT', 'TEXTAREA'].includes(el.tagName)) {
      el.focus()
      return
    }
    // 2. el不是input或文本域，尝试找它的子元素有没有input或文本域，
    let node = el.querySelector('input')
    // 2.1 有的话，让找到的子元素聚焦，
    if (node) {
      node.focus()
      return
    }
    node = el.querySelector('textarea')
    if (node) {
      node.focus()
      return
    }
    // 2.2 否则，直接抛错
    throw new Error('jujiao指令用错了')
  }
})
